<template>
  <ve-card :title="feeOption.feeName" :showDivider="showDivider" :customContentStyle="computeContentStyle" v-bind="$attrs">
    <!-- <template #extra v-if="feeOption.type == 'basicFee' && showViewPriceCalendarBtn">
      <view class="view-pirce" @click="emit('viewPriceCalendar')">查看价格日历</view>
    </template> -->
    <!-- 详细费用 -->
    <template v-for="(feeDetailItem, feeDetailIndex) in feeOption.childrenList" :key="feeDetailIndex">
      <ve-form-item
        :label="feeDetailItem.showItemName || feeDetailItem.itemName"
        :labelWidth="200"
        v-show="!feeDetailItem.hidden"
        v-bind="formAttrs(feeDetailItem, feeDetailIndex)"
        :borderBottom="feeOption.remarkLabel ? true : feeDetailIndex != feeOption.childrenList.length - 1"
        unit="元"
        :disabled="feeDetailItem.disabled"
      >
        <ve-input-number
          :precision="2"
          :disabled="feeDetailItem.disabled"
          :model-value="feeDetailItem.amount"
          @blur="
            (val) => {
              blurFn(val, feeDetailItem)
            }
          "
          @clear="() => (feeDetailItem.amount = '')"
        />
        <template #rightContent v-if="feeDetailItem.showCostTypeSwitch">
          <ve-radio v-model="feeDetailItem.costType" :list="feeCostTypeOptionList" />
        </template>
      </ve-form-item>
    </template>
    <!-- 存在 feeOption.remarkLabel 显示备注录入 -->
    <ve-form-item v-if="feeOption.remarkLabel" :borderBottom="false" class="mb-0" :label="feeOption.remarkLabel" labelPosition="top">
      <ve-input type="textarea" placeholder="请输入备注" v-model="feeOption.remark" :maxlength="200" />
    </ve-form-item>
  </ve-card>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    index: Number,
    list: Array,
    requiredKey: String,
    showDivider: {
      type: Boolean,
      default: true,
    },
    showViewPriceCalendarBtn: {
      type: Boolean,
      default: true,
    },
    inlineCard: Boolean,
    orderFormType: {
      type: String,
      default: '',
    },
  })
  const emit = defineEmits(['viewPriceCalendar', 'feeChange'])

  const feeOption = computed(() => {
    return props.list[props.index]
  })
  const computeContentStyle = computed(() => {
    if (props.inlineCard) {
      return {}
    } else {
      return { paddingBottom: 0 }
    }
  })
  const blurFn = (val, feeDetailItem) => {
    feeDetailItem.amount = val
    emit('feeChange', feeDetailItem, val, props.index)
  }

  const feeCostTypeOptionList = [
    {
      label: '收款',
      value: 10,
    },
    {
      label: '付款',
      value: 20,
    },
  ]

  // 处理必填逻辑
  const formAttrs = (item, index) => {
    if (item.required) {
      return {
        required: true,
        prop: `${props.requiredKey}${props.index}.childrenList.${index}.amount`,
      }
    } else {
      return {}
    }
  }
</script>
<style lang="less" scoped>
  .cost-type-radio {
    .arco-radio {
      margin-right: 24px;
      padding-left: 0;
    }
    .arco-radio + .arco-radio {
      margin-right: 0;
    }
  }
  .view-pirce {
    height: 44rpx;
    font-size: 28rpx;
    color: #3072f6;
    line-height: 44rpx;
  }
  .amount-tag {
    width: 168rpx;
    height: 36rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #165dff;
    border: 2rpx solid #165dff;
    border-radius: 168rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
